import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin } from 'antd';
import UseCardTwo from './useCard2';
import { XYAxisChartsC, NoDataC, SecondHeaderC } from '../../../../components';

@connect(({ profitAndLossM, loading }) => ({
  profitAndLossM,
  loading,
}))
export default class AssetStatic extends PureComponent {
  state = {
    radioVal: 'day',
    bottom: [],
    top: [],
    series: undefined,
    xAxis: undefined,
  };

  componentDidMount() {
    const { dispatch, index, beginDate, endDate } = this.props;
    const portfolioCode = this.props.portfolioCode
      ? {
          portfolioCode: this.props.portfolioCode,
        }
      : {
          portfolioCodeList: this.props.portfolioCodeList,
        };
    const datas = {
      ...portfolioCode,
      timeRange: index,
      beginDate,
      endDate,
    };

    dispatch({
      type: 'profitAndLossM/getEchartDate2',
      payload: datas,
      callback: (res) => {
        const data = res.data || {};
        // eslint-disable-next-line @babel/no-unused-expressions
        data.xAxis && data.xAxis.length
          ? this.setState({
              xAxis: data.xAxis,
              series: data.series,
            })
          : this.setState({
              xAxis: [],
              series: [],
            });
        if (data.xAxis?.length > 0) {
          const asset = this.ChangeNameToType(data.xAxis[0].value);
          if (!asset) return;
          const datass = {
            ...portfolioCode,
            timeRange: index,
            type: asset,
            beginDate,
            endDate,
          };

          dispatch({
            type: 'profitAndLossM/getEchartInfo',
            payload: datass,
            callback: (res) => {
              if (res.code == 0) {
                this.setState({
                  top: res.data.top,
                  bottom: res.data.bottom,
                });
              } else {
                this.setState({
                  top: [],
                  bottom: [],
                });
              }
            },
          });
        }
      },
    });
  }

  componentDidUpdate(prevProps, prevState) {
    const { dispatch, portfolioCode, index, beginDate, endDate, num } = this.props;
    if (prevProps.num !== this.props.num) {
      if (index == '0' && beginDate == undefined && endDate == undefined) {
      } else {
        const portfolioCode = this.props.portfolioCode
          ? {
              portfolioCode: this.props.portfolioCode,
            }
          : {
              portfolioCodeList: this.props.portfolioCodeList,
            };
        this.setState({
          top: [],
          bottom: [],
        });
        const datas = {
          ...portfolioCode,
          timeRange: index,
          beginDate,
          endDate,
        };

        dispatch({
          type: 'profitAndLossM/getEchartDate2',
          payload: datas,
          callback: (res) => {
            const data = res.data || {};
            // eslint-disable-next-line @babel/no-unused-expressions
            data.xAxis && data.xAxis.length
              ? this.setState({
                  xAxis: data.xAxis,
                  series: data.series,
                })
              : this.setState({
                  xAxis: [],
                  series: [],
                });
            if (data.xAxis?.length > 0) {
              const asset = this.ChangeNameToType(data.xAxis[0].value);
              if (!asset) return;
              const datass = {
                ...portfolioCode,
                timeRange: index,
                type: asset,
                beginDate,
                endDate,
              };

              dispatch({
                type: 'profitAndLossM/getEchartInfo',
                payload: datass,
                callback: (res) => {
                  if (res.code == 0) {
                    this.setState({
                      top: res.data.top,
                      bottom: res.data.bottom,
                    });
                  } else {
                    this.setState({
                      top: [],
                      bottom: [],
                    });
                  }
                },
              });
            }
          },
        });
      }
    }
  }

  // 获取图表数据
  getDatas1 = (f, e) => {
    let arr = [];
    e.map((item) => {
      if (item.name == `${f[0]}`) {
        arr = item.data;
      }
    });
    return arr;
  };

  // 获取图表数据
  getDatas2 = (f, e) => {
    let arr = [];
    if (e) {
      e.map((item) => {
        if (item.name == `${f[1]}`) {
          arr = item.data;
        }
      });
      return arr;
    }
  };

  // 获取图表数据
  getDatas3 = (f, e) => {
    let arr = [];
    if (e) {
      e.map((item) => {
        if (item.name == `${f[2]}`) {
          arr = item.data;
        }
      });
      return arr;
    }
  };

  // x轴标识
  ChangeNameToType = (e) => {
    let str = '';
    if (e == '债券') {
      str = 'BOND';
    } else if (e == '存款') {
      str = 'DEPOSIT';
    } else if (e == '非标') {
      str = 'NON_STANDARD';
    } else if (e == '股票') {
      str = 'STOCK';
    } else if (e == '基金') {
      str = 'FUND';
    } else if (e == '期权') {
      str = 'OPTION';
    } else if (e == '期货') {
      str = 'FUTURES';
    }
    return str;
  };

  // 获取名称
  geyName = (e) => {
    const arr = [];
    if (e && e.length) {
      e.map((item) => {
        arr.push(item.name);
      });
    }
    return arr;
  };

  // 根据名称获取key
  ChangeNameToKey = (e) => {
    const { xAxis } = this.state;
    let str = '';
    const arr = xAxis;
    if (arr && arr.length) {
      arr.map((item) => {
        if (e == item.value) {
          str = item.title;
        }
      });
    }

    return str;
  };

  // echarts点击事件
  clickData = (e) => {
    const { dispatch, portfolioCode, index, beginDate, endDate } = this.props;
    if (e.name == '股票' || e.name == '债券' || e.name == '基金' || e.name == '存款' || e.name == '非标' || e.name == '期权' || e.name == '期货') {
      const asset = this.ChangeNameToKey(e.name);
      this.setState({
        bottom: [],
        top: [],
      });
      const portfolioCode = this.props.portfolioCode
        ? {
            portfolioCode: this.props.portfolioCode,
          }
        : {
            portfolioCodeList: this.props.portfolioCodeList,
          };
      const datas = {
        ...portfolioCode,
        timeRange: index,
        type: asset,
        beginDate,
        endDate,
      };

      dispatch({
        type: 'profitAndLossM/getEchartInfo',
        payload: datas,
        callback: (res) => {
          const { data } = res;
          this.setState({
            top: data.top,
            bottom: data.bottom,
          });
        },
      });
    } else {
      this.setState({
        bottom: [],
        top: [],
      });
    }
  };

  changexAxis = (e) => {
    const arr = [];
    if (e && e.length) {
      e.map((item) => {
        arr.push(item.value);
      });
    }

    return arr;
  };

  showEcharts = () => {
    const { dispatch, portfolioCode, index, beginDate, endDate } = this.props;
    const { xAxis, series } = this.state;
    const downName = this.changexAxis(xAxis);

    return (
      <div>
        <XYAxisChartsC
          series={series}
          xAxis={downName}
          height={378}
          type='bar'
          // legentAbbreviate={true}
          gridLeft={90}
          gridRight={20}
          yAxisUnit={['单位(万元)']}
          // seriesLabelDataFormat={[,params=>`${(params.data * 100).toFixed(2)}%`]}
          // lableRotate={45}  //字体倾斜
          click={(e) => this.clickData(e)}
        />
      </div>
    );
  };

  render() {
    const { loading } = this.props;
    const { top, bottom } = this.state;
    const props = {
      top: this.state.top,
      bottom: this.state.bottom,
    };

    return (
      <div>
        <div className='bondDeviation'>
          <SecondHeaderC title='资产维度统计' />
          <div>
            <Row>
              <Col span={12}>
                <div className='cardBodyEcharts2 mgff Mycharts2' style={{ height: '378px' }}>
                  {this.showEcharts()}
                </div>
              </Col>
              <Col span={12}>
                <Spin spinning={loading.effects['profitAndLossM/getEchartInfo'] == true}>
                  {top && top.length ? (
                    <div className='cardBodyEcharts' style={{ height: '378px' }}>
                      <UseCardTwo {...props} />
                    </div>
                  ) : (
                    <NoDataC title='无明细资产盈亏' height='378px' />
                  )}
                </Spin>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  }
}
